<%@ page language="java" contentType="text/html; charset=UTF-8" session="true"
    pageEncoding="UTF-8"%>
<%@ page import="jmysql.CArea"%>
<%@ page import="validaciones.IndexData"%>
<%@ page import="validaciones.ValidateJSON"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>UNIDAD DE SALUD-Sistema de inventario 1.0</title>
<link rel="shortcut icon" type="image/ico" href="images/sistema/u-salud-logo.ico" />
<!-- <link rel="stylesheet" href="lib/jquery1.7/themes/start/jquery-ui-1.8.17.custom.css" /> -->
<link rel="stylesheet" href="css/redmond/jquery-ui.css" />
<link rel="stylesheet" href="css/demos.css" />
<link rel="stylesheet" href="css/index.css" /> 
<script type="text/javascript" src="lib/jquery1.7/jquery-1.7.1.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery1.7/ui/jquery.effects.core.js"></script>		

<%
   IndexData index=new IndexData();
   if(request.getSession().getAttribute("idusuario")!=null){
%>
	<jsp:forward page="aInicio.jsp">
		<jsp:param name="direccion" value="Inicio.jsp"/>
	</jsp:forward>
<%} %>


<script type="text/javascript">
//al inicio
$(document).ready(function(){
	
});

window.onfocus= function() {
	//sino esta en la web que le toca debe mandarlo a la inicial
	/*$.ajax({
			  url: "SesionActiva",
			  data:'', 
			  type: 'post',
			  dataType: 'json',
			  success: function(data){
		  		
			  	}  
	});*/
} 

function cambio(){
	var selection=$("#cmbox_rol").val();
	if(selection==3)
	  $("#cmbox_area").attr('disabled', 'disabled');
	else
	  $("#cmbox_area").removeAttr('disabled');
}

$(function(){
	
	/*Variables*/
	var nomusuario=$("#nomusuario"),password = $( "#password" ),cmbox_area=$("#cmbox_area"),cmbox_rol=$("#cmbox_rol"),
	allFields = $( [] ).add( nomusuario ).add( password ).add(cmbox_area).add(cmbox_rol),
	tips = $( ".Tips" );
	
	/*Envía el mensaje de error*/
	function MensajeError(tip,campo,mensaje){
		$('#'+campo).addClass( "ui-state-error" );
		$('.'+tip).addClass( "ui-state-highlight" );
		$('.'+tip).html( mensaje );
	}
	
	/*Inicializaciones*/
	$("button").button();
	$("#cmbox_rol").change(
			function(){
				cambio();
	});
	
	/*Envía la data*/
	function eData(UsuarioData){
         $.ajax({
           url: 'InicioSesion',
           data: UsuarioData,
           type: 'post',
           dataType: 'json',
           success:function(data){                 
               if(data.resultado=='Redirigir'){
//             	   window.location=data.mensaje;
               }else if(data.resultado=='error'){
            	   MensajeError('Tips',data.campo,data.mensaje);
               }
           }
          });
    }
	
	/*Botón de enviado*/
	/*
	$("#iniciar_sesion").click(function(){
		
// 		Remover las clases
		allFields.removeClass('ui-state-error');
		tips.removeClass( "ui-state-highlight" );
		
// 		Caso de las áreas
		var areax;
        if(cmbox_rol.val()==3)
        	areax=1;
        else
        	areax=cmbox_area.val();
		
		var datos='nomusuario='+nomusuario.val()+'&password='+password.val()+
        '&rol='+cmbox_rol.val()+'&area='+areax;
		eData(datos);
	});*/
	
});
</script>
</head>

<body>
<div id="header">
	<!-- 
	
	<table>
	<tr class="ui-widget-content ui-corner-all">
	<td><img style="width:240px;height:120px;" src="images/sistema/triusac.png"/></td>
	<td></td>
	</tr>
	</table>
	 -->
</div>

<!-- <div style="width:480px;"class="centrado ui-state-focus ui-corner-all"><h2>SISTEMA DE INVENTARIO</h2><h2>UNIDAD DE SALUD</h2></div> -->

<div id="form-login" >
<table style="width:80%" class="centrado">
<tr>
<td style="text-align:center;">
	<div style=""class="ui-state-focus ui-corner-all">
<h1 style="font-size:300%;"class="">SISTEMA DE INVENTARIO </h1>   
<h1 style="font-size:300%;"class="">UNIDAD DE SALUD</h1>
</div>


<img style="width:240px;height:120px;" src="images/sistema/triusac.png"/>
<img style="width:240px;height:120px;" src="images/sistema/logofinal.gif"/>
</td>
</tr>	
</table>	
<table class="centrado">
<tr>
<td style="width:275px;" >
	<%
		//mensaje de error
		if(request.getAttribute("error")!=null)
			out.println("<h3 class=\"ui-state-highlight\">"+request.getAttribute("error").toString()+"</h3>");
	%>
	
	<form method="post" action="IniciarSesion">
	<fieldset class="ui-state-focus ui-corner-all">
		<label for="name">Nombre de usuario</label>
		<input type="text" name="nomusuario" id="nomusuario" class="text ui-widget-content ui-corner-all" /> 
		<label for="ROL">Rol</label>
		<select class="ui-widget-content ui-corner-all" id="cmbox_rol" name="rol" onkeyup="cambio()">
			<option value="1">RESPONSABLE DE AREA</option>
			<option value="2">USUARIO</option>
			<option value="3">ADMINISTRADOR</option>
		</select>
		<label for="AREA">AREA</label>
		<select class="ui-widget-content ui-corner-all" id="cmbox_area" name="area" >
		<%
				//Aca se cargan lás áreas creadas 
				CArea ca=new CArea();
				out.print(ca.ListaAreas()); 
		%>
		</select>
		<!-- Aca están las áreas deben ser cargadas por una consulta -->
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
		<div align="center" style="font-size:14px;">
			<button id="iniciar_sesion">Iniciar sesión</button>
		</div>	 
	</fieldset>
	</form>
</td>

</tr>
</table>

</div>
</body>	
</html>